<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class="layui-card fllextopbox">
				<div class="">

					<a href="#/video/upvideo" class="layui-btn">发布视频</a>
				</div>
				<form class="layui-form" action="">
					<div class="layui-inline">
						<input type="text" class="layui-input" id="datavideo" placeholder="选择日期">
					</div>
					<div class="layui-inline ">
						<select name="shelves" lay-filter="shelvesfilter">
							<option value=" ">全部</option>
							<option value="1">已上架</option>
							<option value="2">预上架</option>
							<option value="3">已下架</option>
							<option value="4">审核中</option>
						</select>
					</div>
					<div class=" tablesearch iconfont iconsousuo ">
						<input type="text" class="layui-input" id="videokey" placeholder="请输入搜索关键字">
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="layui-row " id="videocards">
	</div>
	<div class="pagerow">
		<div id="videopage">
		</div>
	</div>



</div>

<script type="text/html" id="videoid">
	{{#  layui.each(d.data, function(index, item){ }}
	<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 col-lg-1-5 " data-id="{{item.id}}" >
	<div class="videocard">
		

	<a href="#/video/homepage?tbId={{item.id }}">
	
		<div class="videoimg" style="background-image:url({{ G_File_Url+item.image}})">
		{{#  if(item.shelves === 1){ }}
		  <div class="videostates">已上架</div>
		{{#  }else if(item.shelves === 3){ }} 
		 	<div class="videostates" style="background: #ff5454;">已下架</div>
		{{#  }else if(item.shelves === 2){ }} 
		
				<div class="videostates"  style="background: #ec7733;">预上架</div>
		{{#  }else if(item.shelves === 4){ }}
		
				<div class="videostates"  style="background: #fec35d;">审核中</div>
		{{#  } }} 
			<div class="videogmask">
				查看详情
			</div>
		</div>
		<div class="videocont">
			<div class="videotitle">
			{{ item.title }}
			</div>
			<div class="videodata">
				{{ item.createTime }}
					浏览：{{ item.vistnum }}次
			</div>
		
		</div>
		</a>	</div>
	</div>
{{#  }) }} 

</script>


<script>
	var itemjson = {
		currentPage: 1,
		pageSize: 24,
		search: '',
		shelves: '',
		startTime: '',
		stopTime: ''
	}
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form', 'laytpl', 'laydate', 'laypage'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form,
			laydate = layui.laydate,
			laytpl = layui.laytpl,
			laypage = layui.laypage;

		//执行一个laypage实例



		// 注入mock

		form.render();
		getvideofn(itemjson); //一开始初始化列表

		$('#videokey').keydown(function(event) {
			//搜索框输入进行回车的相应
			if (event.keyCode == 13) {
				itemjson.search = $('#videokey').val();
				getvideofn(itemjson);
			}
		})


		form.on('select(shelvesfilter)', function(data) {
		
			itemjson.shelves = data.value
			getvideofn(itemjson);
		});

		function getvideofn(item) {
			POSTAJAX(VideoGet, item, function(res) {
				if (res.status == 200 && res.data != null) {
					$.each(res.data.data , function(idx, obj){
						if(obj.createTime != null){
						obj.createTime = obj.createTime.substring(0 , 10)
						}else{
							obj.createTime = ''
						}
						
					})
					var data = res.data,view = document.getElementById('videocards');
						
						laydate.render({
							elem: '#datavideo' //指定元素
								,
							range: true,
							done: function(value, date, endDate) {
								if(date.year == undefined){
									itemjson.startTime = '';
										itemjson.stopTime = '';
								
								}else{
									itemjson.startTime = date.year + '-' + date.month + '-' + date.date;
								itemjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date;
									}
								
								getvideofn(itemjson);
							}
						});
					laytpl($("#videoid").html()).render(data, function(html) {
						$("#videocards").html(html);
					});
					
				
					
					laypage.render({
						elem: 'videopage',
						curr: itemjson.currentPage,
						count: data.totalCount, //数据总数
						limit: 24, //每页的显示条数

						// 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）

						layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
						theme: 'hhpage',
						jump: function(obj, first) {
							//obj包含了当前分页的所有参数，比如：
							console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
							console.log(obj.limit); //得到每页显示的条数

							itemjson = {
								currentPage: obj.curr,
								pageSize: 24,
								search: '',
								shelves: '',
								startTime: '',
								stopTime: ''
							}
							//首次不执行
							if (!first) {
								//do something
								getvideofn(itemjson)
							}
							// getvideofn(itemjson)

						}
					});

				} else {
					layer.msg("当前搜索条件无视频哦", {
						'icon': 5
					})
				}

			})
		}





	});
</script>

<style scoped>

</style>
